<template>
  <div class="main main_bg">
    <div class="title container bg-fff">{{ title }}</div>
    <van-password-input
      :value="password"
      :info="$t('verify.passwd_num_6')"
      :error-info="errormsg"
      length="6"
      gutter=".11rem"
      @focus="showKeyboard = true;password = '';"
    />
    <!-- 数字键盘 -->
    <van-number-keyboard
      style="position:relative"
      v-model="password"
      maxlength="6"
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <div class="container fixedBtn">
      <button class="btn" @click="handleSubmit()">{{ btn }}</button>
    </div>

    <div class="b_h"></div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "验证交易密码"
    },

    btn: {
      type: String,
      default: "确定"
    }
  },
  data() {
    return {
      isCodePass: false,
      password: "",
      showKeyboard: true,
      errormsg: ""
    };
  },
  methods: {
    onInput(key) {
      this.password = (this.password + key).slice(0, 6);
    },
    onDelete() {
      this.password = this.password.slice(0, this.password.length - 1);
    },
    handleSubmit() {
      if (this.password == "") {
        this.errormsg = this.$t("verify.passwd_num_null_same");
        return;``
      }
      if (this.password.length != 6) {
        this.errormsg = this.$t("verify.passwd_num_6");
        return;
      }
      let data = {
        password: this.$md5(this.password)
      };
      this.password = "";
      this.$emit("callback", data);
    }
  }
};
</script>
<style lang="less" scoped>
#app {
  .title {
    margin-top: 0.2rem;
    height: 0.66rem;
    font-size: 0.3rem;
    font-weight: 400;
    text-align: center;
  }
  .van-password-input {
    margin-top: 0.2rem;
  }

  .fixedBtn {
    padding-bottom: .4rem;
    button {
      margin-top: 0.3rem;
    }
  }
}
</style>
